<template>
<!-- Main content -->
<div>
    <div class="row">
        <div class="col-xs-12">
            <theme-box title="用户账户查询">
                <form class="form-inline" @submit.prevent v-el:form>
                    <form-input title="用户名" :up-table="true" name="usrName"></form-input>

                    <button type="reset" @click="reset" class="btn btn-warning pull-right">重置</button>
                    <v-button theme="primary" @click="search" class="pull-right">查询</v-button>
                </form>
                <table class="table table-bordered table-striped" style="width:100%" v-el:table>
                </table>
            </theme-box>
        </div>
        <!-- /.col -->
    </div>
    <modal-container title="编辑" v-el:modal v-ref:modal class="edit-modal">
        <form @submit.prevent @reset.prevent v-el:mform>
            <div class="modal-body">
                <table-modal :item="item" :columns-set="columnsSet"></table-modal>
            </div>

            <div class="modal-footer">
                <v-button class="pull--left" data-dismiss="modal" @click="resetBindDrag">关闭</v-button>
                <v-button theme="primary" type="submit">保存</v-button>
            </div>
        </form>

    </modal-container>
    <!-- /.row -->
</div>
<!-- /.content -->
</template>

<style lang="less" scoped>
.form-inline .btn+.btn {
    margin-right: 10px;
}
.form-inline .form-group+.form-group {
    margin-left: 20px;
}
</style>
<script>
import {
    dateTime,
    createDataTable
} from 'ui/collections/general.js'
var serialize = require('form-serialize');
import {dateFormat} from "lib/method.js"

var dataTable;
var columnsSet;
export default {
    data: () => ({
        item: {},
        columnsSet: [],
    }),
    methods: {
        //还原弹出框位置
        resetBindDrag() {
            this.$refs.modal._resetBindDrag();
        },
        //查询按钮
        search: function() {
            dataTable.ajax.reload();
        },
        //重置按钮
        reset: function() {
            $(".form-inline")[0].reset();
            dataTable.ajax.reload();
        }
    },
    created() {
        //datatable所用数组
        columnsSet = [{
            title: "用户名",
            data: "usrName",
            edit: true,
            className: "operate"
        },{
            title: "芸券数量",
            data: "totNum",
            edit: true,
            className: "operate"
        }]
    },
    ready: async function() {
        dateTime({
            format: "yyyy-mm-dd",
            minView: "2"
        })
        this.$set("columnsSet", columnsSet)
        var self = this;
        //创建dataTable
          dataTable = $(this.$els.table).DataTable({
            "columns": this.columnsSet, //定义列
            "ajax": async function(data, callback, settings) {
                var page = [{
                    "name": "iDisplayStart",
                    "value": 1 + data.start / data.length
                }, {
                    "name": "iDisplayLength",
                    "value": data.length
                }];
                //表单序列化数据
                var _data = serialize(self.$els.form, {
                    hash: true,
                    disabled: true,
                    empty: true
                });
                _data.aoData = JSON.stringify(page);
                //发送请求
                var result = await self.$post({
                    url: "/api/v3" + projectName_Url + "/plat/usr/wallet",
                    data:_data,
                    method: "POST"
                })
                if (result.respCode != "00") {
                    Midway.alert({
                        title: "操作失败",
                        content: result.content
                    })
                }
                callback({
                    recordsTotal: result.content.total,
                    recordsFiltered: result.content.total,
                    data: result.content.list || []
                })
            }
        });
    }
}
</script>
